<template>
  <div class="adminOrder">
    <div class="adminMsg">
      <h2>订单管理</h2>
      <div class="title block">
        <span>订单列表</span>
        <span >租客信息</span>
        <span v-if="role !=='房东'">房东信息</span>
        <span>操作</span>
      </div>
      <div v-for="item in currentList" :key="item">
        <div class="info block">
          <div class="imgTitle">
            <img :src="getFirstImage(item.house.imgUrl)">
            <div class="houseInfo">
              <h4>订单号:{{ item.orderNo }}</h4>
              <h4>{{item.house.title }}</h4>
              <p>房屋地址：<i class="el-icon-location-outline"> {{ item.house.city + item.house.area + item.house.address }}</i></p>
              <div class="timeInfo">
                <p>租赁日期：<i class="el-icon-date"> {{ item.startDate }} 至 {{ item.endDate }}</i></p>
                <span style="font-size: 16px">月租金：{{ item.monthRent }}元/月</span>
                <span style="font-size: 16px">总租金：{{ item.totalRent }}元</span>
              </div>
<!--              <h5 :class="['status',getStatusType(item.status)]">{{getStatusText(item.status)}}</h5>-->
              <h4>订单状态：<span :class="['status',getStatusType(item.status)]">{{ getOrderStatus(item.status) }}</span></h4>
            </div>
          </div>
          <div class="msg" >
            <p>{{ item.renter.username }}</p>
            <p>{{ item.renter.phone }}</p>
          </div>
          <div v-if="role !=='房东'" class="msg">
            <p>{{ item.landlord.username }}</p>
            <p>{{ item.landlord.phone }}</p>
          </div>
          <div v-if="user.status ===2 && role !== '管理员'" class="btn">
            <el-button size="small" type="primary" @click="toAgreement(item.id)">查看合同</el-button>
          </div>
          <div v-if="role === '管理员'" class="btn">
           <p></p>
          </div>
        </div>
      </div>
      <div class="page">
        <el-pagination :current-page.sync="pageNum"
                       :page-size="pageSize"
                       :page-sizes="[3, 5, 7]"
                       :total="allList.length"
                       layout="total, sizes, prev, pager, next"
                       @current-change="handlePage"
                       @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

const loginUser = JSON.parse(localStorage.getItem("login-user"))
export default {
  name: "AdminMyOrder",
  data() {
    return {
      role:'',
      user:{
        username: '',
        password: '',
        status:2,
      },
      dialogVisible: false,
      pageNum: 1,
      pageSize: 5,
      currentList:[],
      allList:[],
      list:[],
    }
  },
  created() {
    this.getOrder()
    this.getRole()
  },
  methods: {

    handleSizeChange(size) {
      //console.log("当前显示数据数量为：",size)
      this.pageSize = size;

      this.pageNum = 1; // 重置到第一页

      this.handlePage(1,size)
    },

    handlePage(page) {
      this.pageNum = page;
      const start = (page - 1) * this.pageSize;
      const end = page * this.pageSize;
      this.currentList = this.allList.slice(start, end);
    },

    getRole(){
      axios({
        url:"http://localhost:8090/user/getUserRole",
        methods: 'get'
      }).then(res=>{
        if (res.code === '200'){
          this.role = res.data
        }else{
          this.$message.error(res.msg)
        }
      })
    },

    getFirstImage(imgUrl){
      try {
        // 尝试解析JSON格式（兼容数组存储）
        const images = typeof imgUrl === 'string' ? JSON.parse(imgUrl) : imgUrl;
        return images?.[0]; // 返回首图或默认图
      } catch (e) {
        // 处理普通字符串格式（兼容旧数据）
        return imgUrl;
      }
    },


    openDialog() {
      this.dialogVisible = true
    },

    toAgreement(id){
      this.$router.push({
        path: '/index/agreement',
        query: {
          id: id
        }
      })
    },

    getOrder(){
      axios({
        url:"http://localhost:8090/order/orderList/"+loginUser.id,
        methods: 'get',
      }).then(res => {
        if (res.code === '200'){
          this.allList = res.data;
          this.handlePage(1);
        }
      })
    },
    getStatusType(status) {
      switch (status){
        case -1:
          return 'status3';
        case 1:
          return 'status2';
        case -3:
          return 'status5';
        case -2:
          return 'status4';
      }
    },
    getOrderStatus(status){
      switch (status){
        case -1:
          return '待支付';
        case 1:
          return '已支付';
        case -3:
          return 'status5';
        case -2:
          return 'status4';
      }
    }
  }
}
</script>

<style scoped>

.adminOrder{
  width: 1150px;
  min-height: 750px;
  background-color: white;
  padding: 20px 50px;
}

.adminMsg{
  width: 1150px;
  min-height: 850px;
  background-color: white;
  border-radius: 15px;
  padding: 20px 90px 10px 20px;
  box-shadow: 0 0px 14px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.adminMsg h2 {
  font-size: 20px;
  font-weight: 600;
  margin-buttom: 15px;
  margin-left: 0px;
}

.page{
  display: flex;
  margin-bottom: 20px;
  justify-content: center;
}

.block{
  display: block;
  display: flex;
  align-items: center;
  width: 1195px;
}

.block> :first-child{
  flex: 4;
}

.block> :nth-child(n+2){
  flex: 1;
  text-align: center;
}

.title{
  height: 50px;
  background-color: #4b5fff;
  color: white;
  padding-left: 20px;
  margin-top: 20px;
}

.info{
  height: 215px;
  padding:50px 20px;
  border-bottom: 1px solid #eee;
}

.info img{
  padding-top: 15px;
  width: 200px;
  height: 220px;
}

.info .msg{
  color: #777;
}

.imgTitle{
  display: flex;
}

.houseInfo{
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  line-height: 10px;
}

.houseInfo h4{
  font-size: 16px;
}

.houseInfo p{
  font-size: 15px;
  color: #72809D;
}

.houseInfo span{
  padding: 3px 10px;
  width: 150px;
  font-size: 12px;
  color: #777;
  background-color: #eee;
}

/*.status{
  position: absolute;
  font-weight: 600;
  top: 270px;
  left: 500px;
  font-size: 15px;
  border-radius: 5px;
  padding: 5px 10px;

}*/
span.status{
  color: #fff;
  border-radius: 5px;
  font-size:medium;
}
.status1{
  background-color: #e91e65;
  color: #fff;
}
.status2{
  background-color: #20ab6c;
  color: #fff;
}
span.status1 {
  background-color: black;
}

span.status2 {
  background-color: #20ab6c;
}

span.status3 {
  background-color: #e91e65;
}

span.status4 {
  background-color: #f0ad4e;
}

span.status5 {
  background-color: #d9534f;
}
</style>